<template>
  <div class="">
    测试input 上传文件
    <div @click="tapUpload" class="c-ww100 c-hh80 theme-bg c-fc-white c-fs24">点击上传</div>
    <img :src="imgSrc" class="c-ww200 c-hh200" alt="">
    <div @click="tapPlay" class="c-mt20 c-ww100 c-hh80 theme-bg c-fc-white c-fs24">点击播放音频</div>
    <div @click="tapPlay2" class="c-mt20 c-ww100 c-hh80 theme-bg c-fc-white c-fs24">点击播放音2</div>
    <div @click="tapChangeSpeed" class="c-mt20">修改播放倍数</div>
    <wx-open-audio id="wxOpenAudio" :type="isHls" title="mayday" class="wxopenaudio"></wx-open-audio>
    <div @click="tapUploadOld" class="c-ww100 c-hh80 theme-bg c-fc-white c-fs24">点击上传旧图</div>
    <input class=" c-ww60 c-hh60" name="file" type="file" accept="image/*" @change="clickAddPic($event)" />
  </div>
</template>

<script>
import { utilJs } from '@/utils/common';

export default {
  name: "Test",
  data() {
    return {
      imgSrc:'',
      playbackRate: 1,
      isHls:' '
    }
  },
  mounted() {
    utilJs.wechatConfig('', '', '', '', function () {}, '');
    this.initEvent();
    utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        this._imgData = res;
      });
  },
  methods: {
    async tapUpload() {
     let fileList = await utilJs.chooseLocalFile({multiple:true, max:2});
     let imgList = await utilJs.uploadImgListToOss(fileList, {moduleName:'clock'});
     console.log(imgList)
    },
    async tapUploadOld() {
      let fileList = await utilJs.chooseLocalFile({multiple:true, max:2});
      utilJs.imgUpload(fileList, this._imgData, 'info', (res) => {
        console.log(res)
      });
    },
    clickAddPic(event) {
      utilJs.imgUpload(event.target.files, this._imgData, 'info', res => {

      })
    },
    tapChangeSpeed() {
      this.playbackRate = this.playbackRate == 1 ? 2 : 1;
      const wxOpenAudio = document.getElementById('wxOpenAudio');
      wxOpenAudio.playbackRate = this.playbackRate;
    },
    initEvent() {
      const wxOpenAudio = document.getElementById('wxOpenAudio');
      wxOpenAudio.addEventListener('loadedmetadata', this.handerLoadedmetadata);
      wxOpenAudio.addEventListener('canplay', this.handerCanplay);
      wxOpenAudio.addEventListener('error', this.handerError);
      wxOpenAudio.addEventListener('ended', this.handerEnded);
      wxOpenAudio.addEventListener('pause', this.handerPause);
      wxOpenAudio.addEventListener('play', this.handerPlay);
    },
    tapPlay() {
      const wxOpenAudio = document.getElementById('wxOpenAudio');
      this.isHls = 'hls'
      wxOpenAudio.src = 'https://qnoss.ckjr001.com/admin-fe_lj7l_CAWFd3FZMWEH2AcHTybm_1738919127888.m4a.m3u8';
      wxOpenAudio.play();
    },
    tapPlay2() {
      const wxOpenAudio = document.getElementById('wxOpenAudio');
      this.isHls = ' '
      wxOpenAudio.src = 'https://qnoss.ckjr001.com/admin-fe_lj7l_3RjfsYd7FmPkhEHXKjWJ_1675134689953';
      wxOpenAudio.play();
    },
    handerError(e) {
      console.log('--wxopenaudio-handerError', e)
    },
    handerLoadedmetadata(e) {
      console.log('--wxopenaudio-handerLoadedmetadata', e)
    },
    handerCanplay(e) {
      console.log('--wxopenaudio-handerCanplay', e)
    },
    handerEnded(e) {
      console.log('--wxopenaudio-handerEnded', e)
    },
    handerPlay(e) {
      console.log('--wxopenaudio-handerPlay', e)
    },
    handerPause(e) {
      console.log('--wxopenaudio-handerPause', e)
    },
  },
  beforeDestroy() {
  }
}
</script>

<style scoped>
.wxopenaudio{
  position: fixed;
  left: -999px;
  top: 0;
  z-index: -1;
  opacity: 0;
}
</style>